<style>

.global_form{
  
    float:left ;
}

.global_form p.description {
    margin: 3px 0 10px;
    padding: 0;
    width: 300px;
}
.preview_ads{
    width:180px;
    display:block;
    border:1px solid;
    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius: 25px;
    float: left;
    margin-bottom: 20px;
    margin-left:100px;
    padding-bottom:20px;    
}
.preview_ads img{
    
    width:100px;
    margin:0 auto;
    margin-top:25px;
}
.preview_ads div{
    margin: 14px auto 0;
    width: 100px;
}
.global_form input[type="text"]{
    width:300px;
}
#heading-element,#heading1-element{
    width:305px;
}
#heading-element span, #heading1-element span{
    float:right;
}
#preview_ads{
    display:none;
}
#preview_ads-wrapper{
    display:none;
}
#image_upload-wrapper,#ads_description-wrapper{
    display:none;
}
#promotion_title-wrapper{
    display:none;
}
#promotion_description-wrapper{
    display:none;
}
#addletter-element a{
    color:white;
}
</style>

<?php  
    $this->headScript()
      ->appendFile($this->baseUrl() . '/application/modules/Talktangle/externals/scripts/main.js');
      
?>
  
<?php echo $this->form->render($this) ?>

<script type="text/javascript">
    var content1 = $('content1');
    if (content1) content1.set('name','content[1]');
    
    var description1 = $('description1');
    if (description1) description1.set('name','description[1]');
    
    var headingel = $('heading1-element');
    if(headingel) {
        var children = headingel.getElement('span');
        if (children) {
            children.set('text','Remove');
            children.addEvent('click',function(){
                removeLetter(1);
            });
        } 
    }
    
    <?php if($this->type == 'company'):?>
    var addletterEl = $('addletter-element');
    
    if (addletterEl){
        var stringel = '<a  id="addads" style="margin-left:15px;" type="button" href="javascript:void(0);" onclick="ShowAds(this)">Show ads</a>';
        var el = Elements.from(stringel);
        el.inject(addletterEl);
    }
    
    var addPromotionEl = $('addletter-element');
    if (addPromotionEl){
        var stringel = '<a  id="addads" style="margin-left:15px;" type="button" href="javascript:void(0);" onclick="ShowPromotion(this)">Show promotion</a>';
        var el = Elements.from(stringel);
        el.inject(addPromotionEl);
    }
    <?php endif; ?>
    function ShowAds(el){
        var show = el.retrieve('show');
        console.log(show);
        if (show =='none' || show == null) {
            el.store('show','block');
            el.set('text','Hide ads');
            var uploadel = $('image_upload-wrapper');
            if(uploadel) uploadel.style.display = 'block';
            var uploadel = $('ads_description-wrapper');
            if(uploadel) uploadel.style.display = 'block';
            var promotion_section = $('heading_ads-wrapper');
            if(promotion_section)  promotion_section.style.display = 'block';
        
            var hadUpload = $('imageId');
            if (hadUpload) {
                var value = hadUpload.get('value');
                if(value > 0){
                    var ads_preview = $('preview_ads');
                    if(ads_preview) ads_preview.style.display = 'block';
                } 
            }
        } 
        else {
            el.store('show','none');
            el.set('text','Show ads');
            var uploadel = $('image_upload-wrapper');
            if(uploadel) uploadel.style.display = 'none';
            var uploadel = $('ads_description-wrapper');
            if(uploadel) uploadel.style.display = 'none';
            var promotion_section = $('heading_ads-wrapper');
            if(promotion_section)  promotion_section.style.display = 'none';
        
            var hadUpload = $('imageId');
            if (hadUpload) {
                var value = hadUpload.get('value');
                if(value > 0){
                    var ads_preview = $('preview_ads');
                    if(ads_preview) ads_preview.style.display = 'none';
                } 
            }
        }
    }
    
    function ShowPromotion(el){
        var show = el.retrieve('show');
        console.log(show);
        if (show =='none' || show == null) {
            el.store('show','block');
            el.set('text','Hidde promotion');
            
            var title = $('promotion_title-wrapper');
            if(title) title.style.display = 'block';
            
            var description = $('promotion_description-wrapper');
            if(description) description.style.display = 'block';
            
            var image = $('promotion_image-wrapper');
            if(image) image.style.display = 'block';
            
            var promotion_section = $('heading_promotion-wrapper');
            if(promotion_section)  promotion_section.style.display = 'block';
        
            var hadUpload = $('promotion_id');
            if (hadUpload) {
                var value = hadUpload.get('value');
                if(value > 0){
                    var ads_preview = $('preview_promotion');
                    if(ads_preview) ads_preview.style.display = 'block';
                } 
            }
            
        } 
        else {
            el.store('show','none');
            el.set('text','Show promotion');
            
            var title = $('promotion_title-wrapper');
            if(title) title.style.display = 'none';
            
            var description = $('promotion_description-wrapper');
            if(description) description.style.display = 'none';
            
            var image = $('promotion_image-wrapper');
            if(image) image.style.display = 'none';
            
            var promotion_section = $('heading_promotion-wrapper');
            if(promotion_section)  promotion_section.style.display = 'none';
            
            var hadUpload = $('promotion_id');
            if (hadUpload) {
                var value = hadUpload.get('value');
                if(value > 0){
                    var ads_preview = $('preview_promotion');
                    if(ads_preview) ads_preview.style.display = 'none';
                } 
            }
            
        }
    }
    function addFormPreviewAds(){
        var stringel = '<div class="preview_ads" id="preview_ads">';
            stringel +='<img id="preview_ads_image" style="display:none"/>';
            stringel +='<div id="prview_ads_description"></div>';
            stringel +='</div>';
        var el = Elements.from(stringel) ;
        var parent = $('preview_ads-wrapper') ;
        if (parent) {
            el.inject(parent,'before');
        }
        var promotion_section = $('heading_ads-wrapper');
        if(promotion_section)  promotion_section.style.display = 'none';   
    }
    
    
    addFormPreviewAds();
    
     var iframeUpload = new uploadIframe($('image_upload'));
     function keyUpAdsDescription(el){
        var text = el.get('value');
        $('prview_ads_description').set('text',text);
     }
     function uploadAds(){
         
         iframeUpload.submitForm();
     }
     function resultUploadIframe(data){
        if(data.error == false){
            var main = $('preview_ads');
            if(main) main.style.display = 'block';
            var img = $('preview_ads_image');
            if(img){
                img.set('src',data.path);
                img.style.display = 'block';
            } 
            $('imageId').set('value',data.imageId);
            
        }
        else{
            ShowMsg(data.message);
        }
     }
     
     function addErrorToForm(title,message){
        var form = $('form_create_crosstangle');
        var errormain = form.getElement('ul');
        if (!errormain) {
            errormain = new  Element('ul',{
                'class' :'form-errors'
            });
            
            var h3 = form.getElement('h3');
            errormain.inject(h3,'after');
        }
        
        var stringel = '<li>'+title+'<ul class="errors"><li>'+message+'</li></ul></li>';
        errorel = Elements.from(stringel);
        errorel.inject(errormain);
     }
     function checkValidSubmitForm(){
        var error = false;
        var title = $('title');
        if (title) {
           if (title.get('value') =='') {
                addErrorToForm('title','Please provide a valid for this field');
                error = true;
           }  
        }
        
        var title = $('content1');
        if (title) {
           if (title.get('value') =='') {
                addErrorToForm('Letter Info 1','Please provide a valid for Letter');
                error = true;
           }  
        }
        
        var title = $('description1');
        if (title) {
           if (title.get('value') =='') {
                addErrorToForm('Letter Info 1','Please provide a valid for Description');
                error = true;
           }  
        }
        
        var contentLetter = $$('.content-letter');
        contentLetter.each(function (item){
            if (item.get('value') =='') {
                var name = item.get('name');
                var index = name[8];
                addErrorToForm('Letter Info '+index,'Please provide a valid for Letter');
                error = true;
            }
        });
        
        var contentLetter = $$('.description-letter');
        contentLetter.each(function (item){
            if (item.get('value') =='') {
                var name = item.get('name');
                var index = name[12];
                addErrorToForm('Letter Info '+index,'Please provide a valid for Description');
                error = true;
            }
        });
        
        return !error;
     }
     
     
     // upload promotion 
     var promotionUrl = en4.core.baseUrl+'talktangle/promotion/upload/format/smoothbox'
     var iframeUploadPromotion = new uploadIframe($('promotion_image'),promotionUrl,'showPreviewPromotion');
     
     function uploadPromotion(){
         iframeUploadPromotion.submitForm();
     }
     
     function showPreviewPromotion(data){
        if(data.error == false){
            var main = $('preview_promotion');
            if(main) main.style.display = 'block';
            var img = $('preview_promotion_image');
            if(img){
                img.set('src',data.path);
                img.style.display = 'block';
            } 
            $('promotion_id').set('value',data.imageId);
            
        }
        else{
            ShowMsg(data.message);
        }
     }
     
     function addFormPreviewPomotion(){
        var stringel = '<div class="preview_ads" id="preview_promotion" style="display:none">';
            stringel +='<img id="preview_promotion_image" style="display:none"/>';
            stringel +='<div id="prview_promotion_description"></div>';
            stringel +='</div>';
        var el = Elements.from(stringel) ;
        var parent = $('promotion_image-wrapper') ;
        if (parent) {
            el.inject(parent,'after');
        } 
        
        var image = $('promotion_image-wrapper');
        if(image) image.style.display = 'none';
        var promotion_section = $('heading_promotion-wrapper');
        if(promotion_section)  promotion_section.style.display = 'none';
    }
    addFormPreviewPomotion();
</script>